<template>
  <view class="page">
    <!-- 本次防治的病虫害 -->
    <view class="updata">
      <view class="updata-title">
        <text style="color: #4fb718; font-size: 24rpx">本次防治的病虫害</text>
        <text style="color: #999; font-size: 20rpx">（可添加多个）</text>
      </view>
      <view class="updata-insects">
        <view v-for="(item, index) in insects" :key="index" class="insect"
          >{{ item.name }}
          <view class="icon" @click="onDelinsects(item, index)">
            <u-icon name="minus-circle-fill"></u-icon>
          </view>
        </view>
      </view>
      <view class="updata-btns">
        <view class="updata-btn" @click="insectsShow = true">
          <u-icon name="plus" color="#4fb718"></u-icon>
          <view>添加病虫害</view>
        </view>
      </view>
    </view>
    <view class="updata">
      <view class="updata-title">
        <text style="color: #4fb718; font-size: 24rpx">本次使用的药剂</text>
        <text style="color: #999; font-size: 20rpx">（可添加多个）</text>
      </view>
      <view
        class="updata-agentia"
        v-for="(item, index) in agentia"
        :key="index"
      >
        <view class="updata-agentia-left">
          <view
            class="updata-agentia-input"
            style="border-bottom: 1px solid #e9e9e9"
          >
            <view>药剂名称：</view>
            <input
              style="color: #4fb718"
              v-model="item.name"
              placeholder="点击这里输入药剂名称"
            />
          </view>
          <view class="updata-agentia-input">
            <view>用量：</view>
            <input
              v-model="item.value"
              placeholder="点击输入用量"
              style="flex: 1; color: #4fb718"
            />
            <view class="updata-agentia-unit">
              <view
                v-for="(unit_item, unit_index) in units"
                :key="unit_index"
                class="updata-agentia-unit-item"
                :class="{
                  'updata-agentia-unit-active': item.unit === unit_item,
                }"
                @click="item.unit = unit_item"
                >{{ unit_item }}</view
              >
            </view>
          </view>
        </view>
        <u-icon
          @click="onDelunit(index)"
          name="minus-circle-fill"
          color="#eb5f50"
          size="20"
        ></u-icon>
      </view>
      <view class="updata-btns">
        <view class="updata-btn" @click="onAddunit">
          <u-icon name="plus" color="#4fb718"></u-icon>
          <view>添加药剂</view>
        </view>
      </view>
    </view>
    <u-modal
      :show="show"
      content=""
      showCancelButton
      @confirm="onModalconfirm"
      @cancel="show = false"
    >
      <view style="text-align: center; padding: 30rpx 0">确认删除本条记录</view>
    </u-modal>
    <u-popup :show="insectsShow" mode="bottom" @close="insectsShow = false">
      <view class="popup-title">
        <view @click="insectsShow = false">取消</view>
        <view style="flex: 1; font-size: 26rpx; text-align: center"
          >选择害虫病</view
        >
        <view style="color: #4fb718" @click="onPopupconfirm">确定</view>
      </view>
      <view class="popup-desc"> 可添加多个 </view>
      <view class="popup-main">
        <view class="popup-left">
          <view
            class="tabs-item"
            :class="{ 'tabs-item-active': tabsIndex === index }"
            @click="onTabChange(item, index)"
            v-for="(item, index) in tabs"
            :key="index"
          >
            <view>{{ item }}</view>
            <u-badge
              class="checked-num"
              numberType="limit"
              max="99"
              bgColor="#4fb718"
              :value="getCheckedNum(index)"
            ></u-badge>
          </view>
        </view>
        <view class="popup-right">
          <scroll-view scroll-y class="scroll-view">
            <view
              @click="item.checked = !item.checked"
              class="tabs-item-content"
              v-for="(item, index) in tabsData[tabsIndex]"
              :key="index"
            >
              <view
                class="checkbox"
                :class="{ 'checkbox-active': item.checked }"
                ><u-icon name="checkmark" color="#fff" size="12"></u-icon
              ></view>
              <view>{{ item.name }}</view>
            </view>
            <!-- -->
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <view class="btn-box">
      <button class="btn" @click="onSubmit">
        <text class="btn-text" style="color: #fff">下一步</text>
      </button>
    </view>
  </view>
</template>

<script>
import uUpload from "@/components/upload.vue";
export default {
  components: {
    uUpload,
  },
  data() {
    return {
      insectsShow: false,
      show: false,
      insects: [],
      agentia: [{ name: "", unit: "mL", value: "" }],
      units: ["mL", "L", "g", "Kg"],
      agentiaIndex: 0,
      tabs: ["虫害", "病害"],
      tabsIndex: 0,
      tabsData: [
        [
          { name: "黄蜘蛛", checked: false, f_index: 0 },
          { name: "红蜘蛛", checked: false, f_index: 0 },
          { name: "甲壳虫", checked: false, f_index: 0 },
          { name: "黄蜘蛛2", checked: false, f_index: 0 },
          { name: "红蜘蛛3", checked: false, f_index: 0 },
          { name: "甲壳虫4", checked: false, f_index: 0 },
          { name: "黄蜘蛛a", checked: false, f_index: 0 },
          { name: "红蜘蛛d", checked: false, f_index: 0 },
          { name: "甲壳虫da", checked: false, f_index: 0 },
          { name: "黄蜘蛛dasf", checked: false, f_index: 0 },
          { name: "红蜘蛛fas", checked: false, f_index: 0 },
          { name: "甲壳虫asd", checked: false, f_index: 0 },
          { name: "黄蜘蛛sad", checked: false, f_index: 0 },
          { name: "红蜘蛛rw", checked: false, f_index: 0 },
          { name: "甲壳虫ad", checked: false, f_index: 0 },
        ],
        [
          { name: "白癜病", checked: false, f_index: 1 },
          { name: "青苔病", checked: false, f_index: 1 },
          { name: "树脂病", checked: false, f_index: 1 },
        ],
      ],
    };
  },
  onLoad() {},
  mounted() {},
  computed: {},
  methods: {
    gotoPage(value) {
      this.$u.route({
        url: value,
      });
    },
    onAddunit() {
      this.agentia.push({ name: "", unit: "mL", value: "" });
    },
    onDelunit(index) {
      this.show = true;
      this.agentiaIndex = index;
    },
    onModalconfirm() {
      this.agentia.splice(this.agentiaIndex, 1);
      this.show = false;
    },
    onDelinsects(value, index) {
      this.insects.splice(index, 1);
      this.tabsData = this.tabsData.map((item, index) => {
        if (value.f_index === index) {
          return item.map((sub_item) => {
            if (sub_item.name === value.name) {
              sub_item.checked = false;
            }
            return sub_item;
          });
        } else {
          return item;
        }
      });
    },

    onTabChange(value, index) {
      this.tabsIndex = index;
    },
    onPopupconfirm() {
      this.insects = this.tabsData
        .map((item) => [...item])
        .flat()
        .filter((item) => item.checked);
      this.insectsShow = false;
    },
    getCheckedNum(index) {
      return (
        this.tabsData[index] &&
        this.tabsData[index].filter((item) => item.checked).length
      );
    },
    onSubmit() {
      console.log(this.insects, this.agentia);
      this.gotoPage("/pages/experiment/add-record-result");
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding-top: 20rpx;
  min-height: 100vh;
  background: #f6f6f6;
  padding-bottom: 150rpx;
}

.updata {
  background: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 30rpx;
  &-title {
    font-size: 20rpx;
    padding-bottom: 20rpx;
    color: #999;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30rpx;
  }
  // 害虫
  &-insects {
    display: flex;
    flex-wrap: wrap;
    .insect {
      position: relative;
      padding: 5rpx 20rpx;
      text-align: center;
      border: 1px solid #979797;
      font-size: 24rpx;
      margin-right: 15rpx;
      margin-bottom: 20rpx;
      border-radius: 5rpx;
      .icon {
        position: absolute;
        top: -15rpx;
        right: -15rpx;
      }
    }
  }
  // 试剂
  &-agentia {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    // align-items: center;
    &-left {
      flex: 1;
      background: #f4f4f4;
      margin-right: 20rpx;
      border: 1px solid #e9e9e9;
    }
    &-input {
      display: flex;
      align-items: center;
      padding: 20rpx;
    }
    &-unit {
      display: flex;
      justify-content: center;
      margin-left: 20rpx;
      &-item {
        width: 65rpx;
        padding: 8rpx 0;
        text-align: center;
        border: 1px solid #4fb718;
        border-right: none;
        &:last-child {
          border-right: 1px solid #4fb718;
          border-top-right-radius: 5rpx;
          border-bottom-right-radius: 5rpx;
        }
        &:first-child {
          border-top-left-radius: 5rpx;
          border-bottom-left-radius: 5rpx;
        }
      }
      &-active {
        background: #4fb718;
        color: #fff;
      }
    }
  }

  &-btns {
    display: flex;
    justify-content: center;
    margin: 30rpx 0;
  }
  &-btn {
    padding: 15rpx 20rpx;
    border-radius: 11rpx;
    border: 1px solid #4fb718;
    font-size: 25rpx;
    color: #4fb718;
    display: flex;
    align-items: center;
  }
}

.btn-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 100%;
  background: #4fb718;
  border-radius: 0rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.popup-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  padding: 20rpx;
  border-bottom: 1px solid #eaeaea;
}
.popup-desc {
  padding: 10rpx 0;
  border-bottom: 1px solid #eaeaea;
  font-size: 24rpx;
  background: #f4f4f4;
  text-align: center;
  color: #666;
}
.popup-main {
  width: 100%;
  height: 350px;
  display: flex;
  .popup-left {
    width: 140rpx;
    background: #f4f4f4;
    height: 100%;
    .tabs-item {
      width: 100%;
      padding: 15rpx 0;
      font-size: 24rpx;
      font-family: 400;
      padding-left: 30rpx;
      border-bottom: 1px solid #eaeaea;
      border-left: 6rpx solid transparent;
      position: relative;
      .checked-num {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .tabs-item-active {
      border-left: 6rpx solid #4fb718;
      color: #4fb718;
      background: #fff;
    }
  }
  .popup-right {
    flex: 1;
    padding-left: 25rpx;
    .scroll-view {
      width: 100%;
      height: 100%;
      .tabs-item-content {
        width: 100%;
        padding: 15rpx 0;
        font-size: 24rpx;
        font-family: 400;
        border-bottom: 1px solid #eaeaea;
        display: flex;
        align-items: center;
        .checkbox {
          width: 24rpx;
          height: 24rpx;
          margin-right: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #eaeaea;
        }
        .checkbox-active {
          background: #4fb718;
        }
      }
    }
  }
}
</style>
